<template>
  <div>
    <div class="d-flex justify-center pa-3 ma-1 text-h4 font-weight-bold">{{ artInfo.title }}</div>
    <div class="d-flex justify-center align-center">
      <div class="d-flex mx-10 justify-center">
        <v-icon class="mr-1" color="indigo" small>
          {{
          'mdi-calendar-month'
          }}
        </v-icon>
        <span>{{ artInfo.CreatedAt | dateformat('YYYY-MM-DD') }}</span>
      </div>
      <div class="d-flex mr-10 justify-center">
        <v-icon class="mr-1" color="pink" small>{{ 'mdi-comment' }}</v-icon>
        <span>{{ total }}</span>
      </div>
      <div class="d-flex mr-10 justify-center">
        <v-icon class="mr-1" color="green" small>{{ 'mdi-eye' }}</v-icon>
        <span>{{ artInfo.read_count }}</span>
      </div>
      <div class="d-flex mr-10 justify-center">
        <!-- 新增点赞按钮 -->
        <span v-show="showIconP"><i @click="praise(id)"  style="padding-right:.1rem;" class="iconfont icon-dianzan_huaban"></i>赞{{action.praise_num}}</span>
        <span v-show="!showIconP"><i @click="delpraise(id)"  style="padding-right:.1rem;color:red" class="iconfont icon-dianzan_huaban"></i>赞{{action.praise_num}}</span>
      </div>
      <div class="d-flex mr-10 justify-center">
        <!-- 新增点踩按钮 -->
        <span v-show="showIconO"><i @click="object(id)"  style="padding-right:.1rem;" class="iconfont icon-dianzan_huaban"></i>踩{{action.object_num}}</span>
        <span v-show="!showIconO"><i @click="delobject(id)"  style="padding-right:.1rem;color:red" class="iconfont icon-dianzan_huaban"></i>踩{{action.object_num}}</span>
      </div>
    </div>
    <b-divider class="pa-3 ma-3"></b-divider>
    <b-alert
      class="ma-4"
      elevation="1"
      color="indigo"
      dark
      border="left"
      outlined
    >{{ artInfo.desc }}</b-alert>

    <div v-html="artInfo.content" class="content ma-5 pa-3 text-justify"></div>

    <b-divider class="ma-5"></b-divider>
    <b-sheet class="ma-3 pa-3">
      <div>
        <b-list
          outlined
          class="ma-3 pa-3"
          v-for="item in commentList"
          :key="item.ID"
          v-show="item.status === 1"
        >
          <template>
            <b-list-item>
              <b-list-item-content>
                <b-list-item-title>
                  {{ item.username }}
                  {{
                  item.CreatedAt | dateformat('YYYY-MM-DD')
                  }}
                </b-list-item-title>
                <b-list-item-subtitle class="mr-3">
                  {{
                  item.content
                  }}
                </b-list-item-subtitle>
              </b-list-item-content>
            </b-list-item>
          </template>
        </b-list>
      </div>
      <div class="text-center" v-if="commentList">
        <b-pagination
          class="my-2"
          total-visible="7"
          b-model="queryParam.pagenum"
          :length="Math.ceil(total / queryParam.pagesize)"
          @input="getCommentList()"
        ></b-pagination>
      </div>
      <div>
        <template>
          <b-card flat>
            <b-alert v-if="!headers.username" class="ma-3" dense outlined type="error">你还未登录，请登录后留言</b-alert>
            <div v-if="headers.username">
              <b-textarea class="mx-3" outlined v-model="comment.content"></b-textarea>
              <b-btn class="ml-3 mb-1" dark color="indigo" small @click="pushComment()">确定</b-btn>
            </div>
          </b-card>
        </template>
      </div>
    </b-sheet>
  </div>
</template>


<script>
export default {
  props: ['id'],
  data() {
    return {
      artInfo: {},
      actionP: {},
      actionO: {},
      showIconP:{},
      showIconO:{},
      commentList: [],
      comment: {
        content: ''
      },
      total: 0,
      headers: {
        username: '',
        user_id: 0
      },
      queryParam: {
        pagesize: 5,
        pagenum: 1
      }
    }
  },
  created() {
    this.getArtInfo()
    this.renewP()//更新点赞状态
    this.renewO()//更新点踩状态
    this.getState1()//赞的状态初始化 根据路由id和session存的name从点赞表里面查询是否有state1
    this.getState2()//踩的状态初始化 根据路由id和session存的name从点赞表里面查询是否有state2
    this.getCommentList()
    this.headers = {
      username: window.sessionStorage.getItem('username'),
      user_id: window.sessionStorage.getItem('user_id')
    }
  },
  methods: {
    // 触发点赞
    praise(id){
      this.$axios.post('/api/action/addPraise.html',{id:id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!!
          .then(res => {
              this.showIconP=!this.showIconP  //点击切换
              this.renewP()
          })
          .catch(err => console.log(err))
    },
    //点赞 存一条数据到点赞表 设置状态state为1

    // 触发点踩
    praise(id){
      this.$axios.post('/api/action/addPraise.html',{id:id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!!
          .then(res => {
              this.showIconO=!this.showIconO  //点击切换
              this.renewO()
          })
          .catch(err => console.log(err))
    },
    //点踩 存一条数据到点赞表 设置状态state为1

    // 触发取消点赞
    delpraise(id){
      this.$axios.post('/api/action/delPraise.html',{id:id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res => {
              this.showIconP=!this.showIconP
              this.renewP()
          })
          .catch(err => console.log(err))
          //取消点赞 删除这条数据
    },

    // 触发取消点踩
    delobject(id){
      this.$axios.post('/api/action/delPraise.html',{id:id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res => {
              this.showIconO=!this.showIconO
              this.renewO()
          })
          .catch(err => console.log(err))
          //取消点踩 删除这条数据
    },
    renewP(){
      this.id=this.$route.params.id
      this.$axios.post('/api/Action/getactionById.html',{id:this.id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res=>{
              this.actionP=res.data.praise
          })
          .catch(err=>console.log(err))
    },
    renewO(){
      this.id=this.$route.params.id
      this.$axios.post('/api/Action/getactionById.html',{id:this.id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res=>{
              this.actionO=res.data.object
          })
          .catch(err=>console.log(err))
    },
    getState1(){
      this.id=this.$route.params.id
      this.$axios.post('/api/Action/getState1.html',{id:this.id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res=>{
              this.showIconP=!res.data.praise.state1 
          })
          .catch(err=>console.log(err))
    }, 
    getState2(){
      this.id=this.$route.params.id
      this.$axios.post('/api/Action/getState1.html',{id:this.id}) //路径由后端人员修改!!!!!!!!!!!!!!!!!!!!!
          .then(res=>{
              this.showIconO=!res.data.object.state2 
          })
          .catch(err=>console.log(err))
    }, 
    // 查询文章
    async getArtInfo() {
      const { data: res } = await this.$http.get(`article/info/${this.id}`)
      this.artInfo = res.data
      window.sessionStorage.setItem('title', this.artInfo.title)
    },
    // 获取评论
    async getCommentList() {
      const { data: res } = await this.$http.get(`commentfront/${this.id}`, {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      this.commentList = res.data
      this.total = res.total
    },
    // 发送评论
    async pushComment() {
      const { data: res } = await this.$http.post('addcomment', {
        article_id: parseInt(this.id),
        content: this.comment.content,
        user_id: parseInt(this.headers.user_id),
        username: this.headers.username
      })
      if (res.status !== 200) return this.$message.error(res.message)
      this.$message.success('评论成功，待审核后显示')
      this.$router.go(0)
    }
  }
}
</script>
<style scoped>
.content >>> div,
img,
span {
  width: auto;
  max-width: 100%;
}

.content >>> pre,
code {
  margin: 10px;
  padding: 14px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: rgba(27, 31, 35, 0.05);
  border-left-width: 0.5rem;
  border-left-style: solid;
  border-color: #303f9f;
}
</style>